feat(upgrade): Add Vue-specific Protect to Show codemod by jacekradko · Pull Request #7615 · clerk/javascript

jacekradko · 2026-01-17T03:39:19Z

Summary

Fixes: USER-4353

Vue SFC files require different prop syntax than React JSX when binding objects to props:

React JSX	Vue Template
`<Protect role="admin">`	`<Protect role="admin">`
`<Show when={{ role: 'admin' }}>`	`<Show :when="{ role: 'admin' }">`

This PR adds a Vue-specific codemod (transform-protect-to-show-vue) that handles .vue SFC files with proper Vue v-bind syntax.

Changes

New codemod: transform-protect-to-show-vue.cjs - Handles Vue SFC files
Test coverage: 20 test cases covering various Vue scenarios
Config update: core-3 config now routes SDKs to appropriate codemods:
- transform-protect-to-show → nextjs, react, expo, react-router, tanstack-react-start, astro
- transform-protect-to-show-vue → vue, nuxt

Vue Codemod Features

Transforms <script> imports (Protect → Show, ProtectProps → ShowProps)
Transforms <template> components with Vue v-bind syntax
Handles static props (role="admin") → :when="{ role: 'admin' }"
Handles dynamic props (:role="dynamicRole") → :when="{ role: dynamicRole }"
Handles condition callbacks (:condition="..." → :when="...")
Preserves fallback and other attributes
Only transforms templates when clerk imports are detected
Properly handles > and / inside quoted attribute values (like arrow functions)

Test plan

All 201 upgrade package tests pass
20 new Vue-specific test cases added
Manual test with a Vue project using @clerk/vue
Manual test with a Nuxt project using @clerk/nuxt

Summary by CodeRabbit

New Features
- Added a Vue-specific codemod to migrate Protect/SignedIn/SignedOut to Show in .vue files, converting auth props into proper when bindings and preserving other attributes.
Tests
- Added a comprehensive test suite with 22+ fixtures covering diverse Vue transformation scenarios and edge cases.
Chores
- Registered the Vue codemod alongside the existing transform and added a changeset for the upgrade.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Vue SFC files require different prop syntax than React JSX: - React: `<Protect role="admin">` → `<Show when={{ role: 'admin' }}>` - Vue: `<Protect role="admin">` → `<Show :when="{ role: 'admin' }">` This adds a Vue-specific codemod that: - Transforms script imports (Protect → Show, ProtectProps → ShowProps) - Transforms template components with Vue v-bind syntax - Handles static and dynamic prop bindings - Handles condition callbacks - Only transforms when clerk imports are detected The core-3 config is updated to run the appropriate codemod: - `transform-protect-to-show` for React-based SDKs - `transform-protect-to-show-vue` for Vue/Nuxt SDKs

changeset-bot · 2026-01-17T03:39:22Z

🦋 Changeset detected

Latest commit: 61c025d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/upgrade	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2026-01-17T03:39:27Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
clerk-js-sandbox	Skipped		Jan 17, 2026 4:03am

coderabbitai · 2026-01-17T03:41:04Z

📝 Walkthrough

Walkthrough

Adds a Vue-specific codemod and supporting tests/metadata to the upgrade package. New files: a changeset, packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs (exports transformProtectToShowVue and sets module.exports.parser = 'tsx'), a fixtures file exporting fixtures, and a Vitest test suite exercising those fixtures. Updates packages/upgrade/src/versions/core-3/index.js to replace a single codemod entry with two entries: one for transform-protect-to-show (React/JSX targets) and one for transform-protect-to-show-vue (Vue targets). No public API removals.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a Vue-specific codemod for Protect to Show transformations.
Linked Issues check	✅ Passed	The PR implements framework-specific codemod targeting [USER-4353] by creating a Vue-specific transform-protect-to-show-vue codemod and routing SDKs appropriately via core-3 config.
Out of Scope Changes check	✅ Passed	All changes are directly related to the objective: Vue codemod implementation, test fixtures/cases, codemod configuration, and framework routing—no unrelated modifications detected.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs

pkg-pr-new · 2026-01-17T03:43:48Z

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7615

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7615

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7615

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7615

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7615

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7615

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@7615

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7615

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7615

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7615

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7615

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7615

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7615

@clerk/react

npm i https://pkg.pr.new/@clerk/react@7615

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7615

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7615

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7615

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7615

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@7615

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7615

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7615

commit: 61c025d

wobsoriano

looks good here! thank you

github-actions bot added the core-3 label Jan 17, 2026

chore: add changeset

0f5ea42

vercel bot deployed to Preview January 17, 2026 03:41 View deployment

github-advanced-security bot found potential problems Jan 17, 2026

View reviewed changes

packages/upgrade/src/codemods/transform-protect-to-show-vue.cjs Fixed Show fixed Hide fixed

fix: add curly braces to satisfy eslint

0ab7463

vercel bot temporarily deployed to Preview January 17, 2026 03:47 Inactive

fix: improve regex to handle closing tags with whitespace

2c0cb62

vercel bot temporarily deployed to Preview January 17, 2026 03:48 Inactive

style: format core-3 config

61c025d

vercel bot temporarily deployed to Preview January 17, 2026 04:03 Inactive

wobsoriano approved these changes Jan 18, 2026

View reviewed changes

jacekradko merged commit 7b03d2b into main Jan 20, 2026
40 checks passed

jacekradko deleted the jacek/feat-upgrade-vue-protect-to-show-codemod branch January 20, 2026 16:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(upgrade): Add Vue-specific Protect to Show codemod#7615

feat(upgrade): Add Vue-specific Protect to Show codemod#7615
jacekradko merged 5 commits intomainfrom
jacek/feat-upgrade-vue-protect-to-show-codemod

jacekradko commented Jan 17, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Jan 17, 2026 •

edited

Loading

Uh oh!

vercel bot commented Jan 17, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Jan 17, 2026 •

edited

Loading

Walkthrough

Uh oh!

Uh oh!

pkg-pr-new bot commented Jan 17, 2026 •

edited

Loading

Uh oh!

wobsoriano left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

Conversation

jacekradko commented Jan 17, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Vue Codemod Features

Test plan

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

Uh oh!

pkg-pr-new bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wobsoriano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Comments

jacekradko commented Jan 17, 2026 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Jan 17, 2026 •

edited

Loading

vercel bot commented Jan 17, 2026 •

edited

Loading

coderabbitai bot commented Jan 17, 2026 •

edited

Loading

pkg-pr-new bot commented Jan 17, 2026 •

edited

Loading